<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="header">
      <router-link to="/home">
        <div class="return flex">
          <i class="iconfont icon-jiantou red"></i>
          <span class="f14 red">返回</span>
        </div>
      </router-link>
      <div class="title f16">拼团</div>
      <div class="none"></div>
    </div>
    <div style="height: 60px;"></div>
    <!-- 商品信息 -->
    <div class="item">
      <div class="item-left">
        <img src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png" alt="新鲜水果" class="item-img" />
      </div>
      <div class="item-middle">
        <div class="tag">
          <span class="group-icon">多人团</span>
          <span class="item-title">拼团-水果</span>
        </div>
        <div class="price">
          <span class="current-price">¥100</span>
          <span class="original-price">¥200</span>
        </div>
        <div class="group-status">
          已团 <span class="group-number">0</span> 件
        </div>
      </div>
      <div class="item-right">
        <button class="action-btn">去拼团</button>
      </div>
    </div>
    <div class="item">
      <div class="item-left">
        <img src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png" alt="新鲜水果" class="item-img" />
      </div>
      <div class="item-middle">
        <div class="tag">
          <span class="group-icon">多人团</span>
          <span class="item-title">拼团-水果</span>
        </div>
        <div class="price">
          <span class="current-price">¥100</span>
          <span class="original-price">¥200</span>
        </div>
        <div class="group-status">
          已团 <span class="group-number">0</span> 件
        </div>
      </div>
      <div class="item-right">
        <button class="action-btn">去拼团</button>
      </div>
    </div>
    <div class="item">
      <div class="item-left">
        <img src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png" alt="新鲜水果" class="item-img" />
      </div>
      <div class="item-middle">
        <div class="tag">
          <span class="group-icon">多人团</span>
          <span class="item-title">拼团-水果</span>
        </div>
        <div class="price">
          <span class="current-price">¥100</span>
          <span class="original-price">¥200</span>
        </div>
        <div class="group-status">
          已团 <span class="group-number">0</span> 件
        </div>
      </div>
      <div class="item-right">
        <button class="action-btn">去拼团</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
body {
  background-color: #f4f4f4;
}


/* 顶部导航栏 */
.icon-jiantou {
  font-size: 14px;
}

.header {
  /* width: 100%; */
  width: 375px;
  height: 50px;
  background-color: #fff;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .return {
  width: 60px;
  margin-left: 15px;
  align-items: center;
}

.none {
  width: 60px;
  margin-right: 15px;
}

.item {
  display: flex;
  align-items: center;
  width: 375px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

.item-left {
  flex-shrink: 0;
}

.item-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.item-middle {
  flex-grow: 1;
  padding: 0 10px;
}

.tag {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.group-icon {
  font-size: 12px;
  color: #c40000;
  border: 1px solid #c40000;
  padding: 2px 4px;
  border-radius: 2px;
  margin-right: 5px;
}

.item-title {
  font-size: 14px;
  color: #333;
}

.price {
  margin-bottom: 5px;
}

.current-price {
  font-weight: bold;
  font-size: 16px;
  color: #ff4d4f;
  margin-right: 5px;
}

.original-price {
  font-size: 12px;
  color: #aaa;
  text-decoration: line-through;
}

.group-status {
  font-size: 12px;
  color: #666;
}

.group-number {
  font-weight: bold;
  color: #ff4d4f;
}

.item-right {
  flex-shrink: 0;
}

.action-btn {
  background: linear-gradient(to right, #ff7f50, #ff4500);
  font-size: 14px;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
}
</style>